<template>
    <div>
      <Table :columns="columns" :data="ajaxData"></Table>
      <Page :total="dataCount" :page-size="pageSize" show-total show-elevator show-sizer class="paging" @on-change="changepage" @on-page-size-change="changePageSize"></Page>
    </div>
</template>
<style scoped>
  .paging{
      float:right;
      margin-top:10px;
  }
</style>
<script>
import _ajax from '@/router/axios'; 	
export default {
    name: 'customPage',
    props: {
        columns: {
            type: Array
        },
        url: {
            type: String,
        }
    },
    data(){
    	return {
    		ajaxData:[],
	        // 初始化信息总条数
	        dataCount:0,
	        // 每页显示多少条
	        pageSize:10,
    	};
    },
    methods:{
        handleList(pageIndex,pageSize){
            _ajax.get(this.url,{
            	params :{pageIndex:pageIndex,pageSize:pageSize}
            })
            .then(res=>{
            	console.log(res.data);
                this.ajaxData = res.data.data;
                this.dataCount = res.data.count;
            })
        },
        changepage(index){
        	this.handleList(index-1,this.pageSize)
        },
        changePageSize(pageSize){
        	this.pageSize=pageSize;
        	this.handleList(0,this.pageSize)
        }
    },
    created(){
         this.handleList(0,10);
    }
};
</script>
